<template>
	<view class ="cardstyle" style="background-color: aliceblue;">
		<view style="display: flex; flex-direction: row;">
			<view class="imgbox">
				<image :src="image[0]" v-if="mode==2"></image>
			</view>
			<view>
				<text class="titlebox">{{title}}</text>
			</view>
		</view>
		<view class="tipsbox">
			<view style="display: flex;">
				<text class="texttips" v-if="isTop" style="color: red; margin-left: 0px;">
					置顶
				</text>
				<text class="texttips">{{author}}</text>
				<text class="texttips">{{comments}}评</text>
			</view>
			<view style="flex: 1; display: flex; justify-content: flex-end;">
			<text class="texttips">{{time}}</text>
			</view>
		</view>
		<slot name="footer"></slot>
	</view>
</template>

<script>
	export default {
		name:"xinwen",
		data() {
			return {
				
			};
			},
			props:{
				title:{
					type:String,
					default:"新闻标题",
					require:true,
				},
				isTop:{
					type:Boolean,
					default:false,
					require:true
				},
				author:{
					type:String,
					default:"来源",
					require:true
				},
				comments:{
					type:String,
					default:0,
					require:true
				},
				time:{
					type:String,
					default:"2025.10.29"
				},
				mode:{
					type:Number,
					default:1,
					require:true
				},
				// image:[
				// 	"/static/news-imgs.jpg",
				// 	"/static/news-imgs.jpg",
				// 	"/static/news-imgs.jpg",
				// ]

			
		}
	}
</script>

<style>
.cardstyle {
  padding: 10rpx;
  margin: 10rpx 0;
  background-color: #00ffff;
  border-radius: 12rpx;
  letter-spacing: 2rpx;
  line-height: 1.8;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.titlebox {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.5;
  margin-bottom: 8rpx;
}
.tipsbox {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}
.texttips{
	font-size: 15px;
	color: #aaa;
	margin-left: 20rpx;
}
.imgbox image {
  width: 100px;
  height: 80px;
  margin-right: 20rpx;
}
</style>